import { cls } from '@knno/jsx';
import SVGLoading from '../../svg/loading.svg';
import SVGLoadingDot from '../../svg/loading-dot.svg';
import { Icon, type IconProps } from '../icon/icon';
import { loadingStyle } from './loading.css';

export type LoadingProps = Omit<IconProps, 'svg'>;

export function Loading(props: LoadingProps): SVGElement {
	return (
		<Icon {...props} class={cls(props.class, loadingStyle)} svg={SVGLoading} />
	) as SVGElement;
}

export function LoadingDot(props: LoadingProps): SVGElement {
	return (
		<Icon {...props} class={cls(props.class, loadingStyle, 'dot')} svg={SVGLoadingDot} />
	) as SVGElement;
}
